<script setup>
import TheIcon from "./TheIcon.vue";
import TheAvatar from "./TheAvatar.vue";
import PostActions from "./PostActions.vue";
import TheModal from "./TheModal.vue";
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { dateToRef } from "../utils/dateDiff.js";

const store = useStore();
//展示post详情
const hidePostDetail = () => {
  store.dispatch("hidePostDetail", false);
};
const post = computed(() => {
  return store.getters.getDetailPost;
});
const comment = ref("");
const postID = 12345;

//展示评论列表
const comments = computed(() => {
  return store.state.comment.commentsList;
});

//添加评论
const addComment = () => {
  store.dispatch("addCommentSync", {
    id: +new Date(),
    name: "张八",
    time: +new Date(),
    comment: comment.value,
  });
};

onMounted(() => {
  console.log(store.state);
});
</script>

<template>
  <Teleport to="body">
    <TheModal @close="hidePostDetail">
      <div class="postDetails">
        <img
          src="../assets/large_screenshot_20170508_170345_cf6bb41a78.png"
          class="postImg"
        />
        <div class="postMeta">
          <div class="author">
            <TheAvatar></TheAvatar>
            <span
              >张三<span> {{ post }} </span></span
            >
          </div>
          <pre class="postDesc">
一棵树一棵树一棵树一棵树一棵树一棵树一棵树一棵树一棵树一棵树一棵树一棵树一棵树一棵树</pre
          >
          <div class="comments">
            <div class="comment" v-for="item in comments" :id="item.id">
              <TheAvatar class="avatar"></TheAvatar>
              <span class="user">{{ item.name }}</span>
              <span class="commentDate">{{ dateToRef(item.time) }} </span>
              <p class="commentContent">{{ item.comment }}</p>
            </div>
          </div>
          <div class="actions">
            <PostActions></PostActions>
            <span class="postPubDate">12d</span>
            <input
              type="text"
              name="comment"
              class="commentInput"
              placeholder="评论一条吧"
              v-model="comment"
            />
            <button class="commentPubBtn" @click="addComment">发布</button>
          </div>
        </div>
      </div>
    </TheModal>
  </Teleport>
</template>

<style scoped>
.postDetails {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 350px);
  grid-template-rows: minmax(0, 1fr);
  width: 75vw;
  height: 75vh;
}

.postImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.postMeta {
  padding: 24px;
  padding-top: 36px;
  display: grid;
  grid-template-rows: max-content max-content 1fr max-content;
  height: 100%;
}

.author {
  display: flex;
  gap: 10px;
  align-items: center;
}

.postDesc {
  width: 100%;
  white-space: pre-wrap;
  margin-top: 24px;
}

.comments {
  margin-top: 15px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  grid-gap: 28px;
  align-items: center;
  overflow-y: auto;
  height: 100%;
}

.comment {
  display: grid;
  grid-template-areas: "avatar name date" "comment comment comment";
  grid-template-columns: 34px 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 10px;
  row-gap: 14px;
}

/* .comment .avatar {
  grid-area: avatar;
}

.comment .user {
  grid-area: name;
} */

.comment .commentDate {
  grid-area: date;
}

.commentContent {
  grid-area: comment;
}

.actions {
  border-top: 1px solid #eaeaea;
  margin-top: 20px;
  margin-left: -24px;
  margin-right: -24px;
  padding: 20px 24px 0 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 16px;
  align-items: center;
}

.postActions > :deep(svg) {
  transform: scale(0.8);
}

.postPubDate {
  color: #9f9f9f;
  /* color: red; */
  grid-column: 2/6;
  font-size: 14px;
  justify-self: end;
}

.commentInput {
  background-color: #f7f7f7;
  border-radius: 16px;
  border: none;
  grid-column: 1/4;
}

.commentInput::placeholder {
  border: none;
  color: #b9b9b9;
}

.commentPubBtn {
  color: #1da0ff;
  background: none;
  font-size: 16px;
  border: none;
  grid-column: 4/6;
  justify-self: end;
}
</style>
